<template>
  <view class="page">
    <view class="story-box">
      <Story-item v-for="(i, k) in storyList" :key="k" :item="i" @clickItem="clickItem" />
    </view>
    <u-loadmore v-if="storyList.length != 0" :status="status" />
    <u-empty
      v-else
      :icon="webSrc('/assets/web_img/empty.png')"
      width="162"
      height="162"
      text="暂无故事集"
      textColor="#bababa"
    />
  </view>
</template>

<script>
import StoryItem from "@/components/qiu/StoryItem";

import { qiuStory } from "@/request/qiuApi.js";

export default {
  components: { StoryItem },
  data() {
    return {
      storyList: [], // 故事列表
      status: "loadmore", // 加载状态
      page: 1, // 页数
      total: 0, // 总数
    };
  },
  created() {
    this.getDataList();
  },
  onReachBottom() {
    if (this.total > this.storyList.length) {
      this.page++;
      this.getDataList();
    }
  },
  methods: {
    // 获取数据列表
    getDataList() {
      let data = {
        page: this.page,
        pageSize: 10,
        type: "qsy",
      };
      this.status = "loading";
      qiuStory(data)
        .then((res) => {
          if (res.code == 1) {
            this.storyList =
              this.page == 1 ? res.data.list : this.storyList.concat(res.data.list);
            this.total = res.data.total;
          }
        })
        .finally(() => {
          this.status = this.total >= this.storyList.length ? "nomore" : "loadmore";
        });
    },
    // 故事详情
    clickItem(i) {
      uni.navigateTo({ url: "/pages/qiu/storyDetail?id=" + i.id });
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  padding: 20rpx;
  .story-box {
    display: grid;
    grid-template-columns: repeat(2, calc(50% - 10rpx));
    grid-gap: 15rpx;
  }
}
</style>
